import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:smart_home/model/device.dart';
import 'package:smart_home/pages/search_device/store.dart';
import 'package:smart_home/utils/color_utils.dart';
import 'package:smart_home/utils/main.dart';
import 'package:smart_home/widgets/network_image.dart';
import '../../utils/extension/double.dart';

final appBarTextColor = ColorsUtil.hexColor(0x5d5d5d);

class SearchDevicePage extends StatefulWidget {
  const SearchDevicePage({Key? key}) : super(key: key);

  @override
  _SearchDevicePageState createState() => _SearchDevicePageState();
}

class _SearchDevicePageState extends State<SearchDevicePage> {
  ScrollController searchScroll = ScrollController();

  @override
  void initState() {
    super.initState();

    searchScroll.addListener(() {
      var maxScroll = searchScroll.position.maxScrollExtent;
      var pixels = searchScroll.position.pixels;
      if (maxScroll == pixels) {
        // print("$maxScroll========$pixels");
        final SearchDeviceController searchDeviceState =
            Get.put(SearchDeviceController());
        searchDeviceState.dropDownChangeListData();
      }
    });
  }

  @override
  void dispose() {
    super.dispose();
    searchScroll.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final SearchDeviceController searchDeviceState =
        Get.put(SearchDeviceController());
    searchDeviceState.searchChangeListData();
    return Scaffold(
      appBar: _buildAppBar(),
      body: ListView(
        // 把ScrollController关联起来
        controller: searchScroll,
        children: [
          Container(
            margin: EdgeInsets.all(10.px),
            child: Column(
              children: [
                SearchFiled(),
                Obx(() => Column(
                      children: searchDeviceState.records.length == 0
                          ? [
                              Image.asset("static/icons/abnormal.png",
                                  width: 24.px),
                              Text("设备不知道飞哪了")
                            ]
                          : searchDeviceState.records
                              .map((element) => Cell(
                                    recordsItem: element,
                                  ))
                              .toList(),
                    )),
                //
                Obx(() => searchDeviceState.records.length == 0
                    ? Text("")
                    : Text("${searchDeviceState.loadText}"))
              ],
            ),
          )
        ],
      ),
    );
  }

  AppBar _buildAppBar() {
    return AppBar(
      backgroundColor: Colors.white,
      centerTitle: true,
      title: Text(
        "添加设备",
        style: TextStyle(color: appBarTextColor, fontSize: 16.px),
      ),
      leading: GestureDetector(
        onTap: () {
          Get.back();
        },
        child: Icon(
          Icons.chevron_left_outlined,
          color: appBarTextColor,
        ),
      ),
    );
  }
}

class Cell extends StatelessWidget {
  const Cell({
    Key? key,
    required this.recordsItem,
  }) : super(key: key);

  final Records recordsItem;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 60.px,
      child: Row(
        children: [
          NetWorkImage("${recordsItem.dftIcon}",
              width: 30.px,
              height: 30.px,
              defualtImageUri: "static/icons/damage-map.png"),
          Container(
              margin: EdgeInsets.only(left: 40.px),
              child: Text("${recordsItem.idstName ?? "设备错误"}"))
        ],
      ),
    );
  }
}

class SearchFiled extends StatefulWidget {
  const SearchFiled({
    Key? key,
  }) : super(key: key);

  @override
  _SearchFiledState createState() => _SearchFiledState();
}

class _SearchFiledState extends State<SearchFiled> {
  TextEditingController _searchController = TextEditingController();

  @override
  void initState() {
    final SearchDeviceController searchDeviceState =
        Get.find<SearchDeviceController>();
    super.initState();
    _searchController.addListener(() {
      searchDeviceState.changeDeviceName(_searchController.text);
      CommonUtil.debounce(searchDeviceState.searchChangeListData);
    });
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _searchController,
      decoration: InputDecoration(
        contentPadding: EdgeInsets.only(top: 12.px, bottom: 12.px, left: 15.px),
        hintText: "请输入搜索关键字",
        hintStyle: TextStyle(fontSize: 14.px),
        fillColor: ColorsUtil.hexColor(0xffffff),
        filled: true,
        //重点，相当于高度包裹的意思，必须设置为true，不然有默认奇妙的最小高度
        isCollapsed: true,
        enabledBorder: OutlineInputBorder(
          borderSide:
              BorderSide(width: 2.px, color: ColorsUtil.hexColor(0xf7f7f7)),
        ),
        focusedBorder: OutlineInputBorder(
          borderSide:
              BorderSide(width: 2.px, color: ColorsUtil.hexColor(0xf7f7f7)),
        ),
      ),
    );
  }
}
